<template>
  <div class="football-list">
    <h1>football list</h1>
    <div class="list-container">
      <div v-for="(match, index) in matches" :key="index" class="match-item" @click="goToDetail(index)">
        <div class="match-header">
          <h3>{{ match.homeTeam }} vs {{ match.awayTeam }}</h3>
          <span class="match-time">{{ match.time }}</span>
          <span class="match-status" :class="match.status.toLowerCase()">{{ match.status }}</span>
        </div>
        
        <div class="score-section">
          <span class="score">{{ match.score }}</span>
        </div>

        <div class="odds-section">
          <div class="odds-group handicap">
            <h4>R</h4>
            <div class="odds-tabs">
              <div class="tab" :class="{ active: match.selectedHandicap === 0 }" @click="selectHandicap(index, 0)">{{ match.handicapValues[0] }}</div>
              <div class="tab" :class="{ active: match.selectedHandicap === 1 }" @click="selectHandicap(index, 1)">{{ match.handicapValues[1] }}</div>
              <div class="tab" :class="{ active: match.selectedHandicap === 2 }" @click="selectHandicap(index, 2)">{{ match.handicapValues[2] }}</div>
            </div>
            <div class="odds-row">
              <div class="odds-cell" @click="updateHandicapOdds(index, 'home')" 
                   :class="{ 'odds-up': match.handicapTrends[match.selectedHandicap].home === 'up', 
                           'odds-down': match.handicapTrends[match.selectedHandicap].home === 'down' }">
                Z {{ match.handicapOddsList[match.selectedHandicap].home }}
              </div>
              <div class="handicap-value">{{ match.handicapValues[match.selectedHandicap] }}</div>
              <div class="odds-cell" @click="updateHandicapOdds(index, 'away')"
                   :class="{ 'odds-up': match.handicapTrends[match.selectedHandicap].away === 'up',
                           'odds-down': match.handicapTrends[match.selectedHandicap].away === 'down' }">
                K {{ match.handicapOddsList[match.selectedHandicap].away }}
              </div>
            </div>
          </div>

          <div class="odds-group totals">
            <h4>DX</h4>
            <div class="odds-tabs">
              <div class="tab" :class="{ active: match.selectedTotal === 0 }" @click="selectTotal(index, 0)">{{ match.totalValues[0] }}</div>
              <div class="tab" :class="{ active: match.selectedTotal === 1 }" @click="selectTotal(index, 1)">{{ match.totalValues[1] }}</div>
              <div class="tab" :class="{ active: match.selectedTotal === 2 }" @click="selectTotal(index, 2)">{{ match.totalValues[2] }}</div>
            </div>
            <div class="odds-row">
              <div class="odds-cell" @click="updateTotalOdds(index, 'over')"
                   :class="{ 'odds-up': match.totalTrends[match.selectedTotal].over === 'up',
                           'odds-down': match.totalTrends[match.selectedTotal].over === 'down' }">
                大 {{ match.totalOddsList[match.selectedTotal].over }}
              </div>
              <div class="total-value">{{ match.totalValues[match.selectedTotal] }}</div>
              <div class="odds-cell" @click="updateTotalOdds(index, 'under')"
                   :class="{ 'odds-up': match.totalTrends[match.selectedTotal].under === 'up',
                           'odds-down': match.totalTrends[match.selectedTotal].under === 'down' }">
                小 {{ match.totalOddsList[match.selectedTotal].under }}
              </div>
            </div>
          </div>

          <div class="odds-group moneyline">
            <h4>DY</h4>
            <div class="odds-row">
              <div class="odds-cell" @click="updateMoneylineOdds(index, 'home')"
                   :class="{ 'odds-up': match.moneylineTrend?.home === 'up',
                           'odds-down': match.moneylineTrend?.home === 'down' }">
                ZS {{ match.moneylineOdds?.home }}
              </div>
              <div class="odds-cell draw" @click="updateMoneylineOdds(index, 'draw')"
                   :class="{ 'odds-up': match.moneylineTrend?.draw === 'up',
                           'odds-down': match.moneylineTrend?.draw === 'down' }">
                HJ {{ match.moneylineOdds?.draw }}
              </div>
              <div class="odds-cell" @click="updateMoneylineOdds(index, 'away')"
                   :class="{ 'odds-up': match.moneylineTrend?.away === 'up',
                           'odds-down': match.moneylineTrend?.away === 'down' }">
                KS {{ match.moneylineOdds?.away }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 生成随机赔率变化
const generateRandomOdds = () => {
  return (Math.random() * 0.1 - 0.05 + 1).toFixed(2)
}

// 生成新的赔率
const getNewOdds = (currentOdds) => {
  const change = (Math.random() * 0.1 - 0.05)
  const newOdds = (parseFloat(currentOdds) + change).toFixed(2)
  return {
    odds: newOdds,
    trend: change > 0 ? 'up' : change < 0 ? 'down' : 'stable'
  }
}

const matches = ref([
  {
    id: 1,
    homeTeam: 'ML',
    awayTeam: 'LW',
    time: '2024-03-10 20:00',
    status: 'LIVE',
    score: '1 : 0',
    selectedHandicap: 0,
    selectedTotal: 0,
    handicapValues: ['-0.5', '-0.75', '-1'],
    handicapOddsList: [
      { home: '1.95', away: '1.85' },
      { home: '2.05', away: '1.75' },
      { home: '2.15', away: '1.65' }
    ],
    handicapTrends: [
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' }
    ],
    totalValues: ['2.0', '2.25', '2.5'],
    totalOddsList: [
      { over: '1.90', under: '1.90' },
      { over: '1.95', under: '1.85' },
      { over: '2.00', under: '1.80' }
    ],
    totalTrends: [
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' }
    ],
    moneylineOdds: { home: '2.20', draw: '3.40', away: '2.90' },
    moneylineTrend: { home: 'stable', draw: 'stable', away: 'stable' }
  },
  {
    id: 2,
    homeTeam: 'HM',
    awayTeam: 'BS',
    time: '2024-03-11 03:00',
    status: 'LIVE',
    score: '3 : 1',
    selectedHandicap: 0,
    selectedTotal: 0,
    handicapValues: ['0', '0.25', '0.5'],
    handicapOddsList: [
      { home: '2.00', away: '1.80' },
      { home: '2.05', away: '1.75' },
      { home: '2.10', away: '1.70' }
    ],
    handicapTrends: [
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' }
    ],
    totalValues: ['2.5', '2.75', '3'],
    totalOddsList: [
      { over: '1.85', under: '1.95' },
      { over: '1.90', under: '1.90' },
      { over: '1.95', under: '1.85' }
    ],
    totalTrends: [
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' }
    ],
    moneylineOdds: { home: '2.50', draw: '3.20', away: '2.60' },
    moneylineTrend: { home: 'stable', draw: 'stable', away: 'stable' }
  },
  {
    id: 3,
    homeTeam: 'BR',
    awayTeam: 'DM',
    time: '2024-03-11 21:30',
    status: 'LIVE',
    score: '1: 1',
    selectedHandicap: 0,
    selectedTotal: 0,
    handicapValues: ['-1.5', '-1.75', '-2'],
    handicapOddsList: [
      { home: '2.05', away: '1.75' },
      { home: '2.10', away: '1.70' },
      { home: '2.15', away: '1.65' }
    ],
    handicapTrends: [
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' }
    ],
    totalValues: ['3.0', '3.25', '3.5'],
    totalOddsList: [
      { over: '1.92', under: '1.88' },
      { over: '1.95', under: '1.85' },
      { over: '2.00', under: '1.80' }
    ],
    totalTrends: [
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' }
    ],
    moneylineOdds: { home: '1.90', draw: '3.50', away: '3.20' },
    moneylineTrend: { home: 'stable', draw: 'stable', away: 'stable' }
  }
])

// 选择让球盘口
const selectHandicap = (matchIndex, handicapIndex) => {
  matches.value[matchIndex].selectedHandicap = handicapIndex
}

// 选择大小球盘口
const selectTotal = (matchIndex, totalIndex) => {
  matches.value[matchIndex].selectedTotal = totalIndex
}

// 更新让球赔率
const updateHandicapOdds = (matchIndex, side) => {
  const match = matches.value[matchIndex]
  const selectedIndex = match.selectedHandicap
  const result = getNewOdds(match.handicapOddsList[selectedIndex][side])
  match.handicapOddsList[selectedIndex][side] = result.odds
  match.handicapTrends[selectedIndex][side] = result.trend
  
  setTimeout(() => {
    match.handicapTrends[selectedIndex][side] = 'stable'
  }, 2000)
}

// 更新大小球赔率
const updateTotalOdds = (matchIndex, side) => {
  const match = matches.value[matchIndex]
  const selectedIndex = match.selectedTotal
  const result = getNewOdds(match.totalOddsList[selectedIndex][side])
  match.totalOddsList[selectedIndex][side] = result.odds
  match.totalTrends[selectedIndex][side] = result.trend
  
  setTimeout(() => {
    match.totalTrends[selectedIndex][side] = 'stable'
  }, 2000)
}

// 更新独赢赔率
const updateMoneylineOdds = (matchIndex, side) => {
  const match = matches.value[matchIndex]
  const result = getNewOdds(match.moneylineOdds[side])
  match.moneylineOdds[side] = result.odds
  match.moneylineTrend[side] = result.trend
  
  setTimeout(() => {
    match.moneylineTrend[side] = 'stable'
  }, 2000)
}

// 自动更新赔率
let oddsInterval
onMounted(() => {
  oddsInterval = setInterval(() => {
    matches.value.forEach((match, index) => {
      if (match.status === 'LIVE') {
        // 随机选择更新哪种赔率
        const updateType = Math.random()
        if (updateType < 0.33) {
          updateHandicapOdds(index, Math.random() > 0.5 ? 'home' : 'away')
        } else if (updateType < 0.66) {
          updateTotalOdds(index, Math.random() > 0.5 ? 'over' : 'under')
        } else {
          const sides = ['home', 'draw', 'away']
          updateMoneylineOdds(index, sides[Math.floor(Math.random() * 3)])
        }
      }
    })
  }, 2000)
})

onUnmounted(() => {
  clearInterval(oddsInterval)
})

const goToDetail = (index) => {
  router.push(`/football/${matches.value[index].id || index}`)
}
</script>

<style scoped>
.football-list {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.list-container {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.match-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.match-header h3 {
  margin: 0;
  font-size: 1.2em;
  color: #2c3e50;
}

.match-time {
  color: #666;
  font-size: 0.9em;
}

.match-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.match-status.滚球中 {
  background-color: #4CAF50;
  color: white;
}

.match-status.未开始 {
  background-color: #FFC107;
  color: #333;
}

.score-section {
  text-align: center;
  margin: 15px 0;
}

.score {
  font-size: 1.5em;
  font-weight: bold;
  color: #2c3e50;
}

.odds-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.odds-group {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
}

.odds-group h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 1em;
}

.odds-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.odds-cell {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odds-cell:hover {
  background-color: #f0f0f0;
}

.handicap-value,
.total-value {
  font-weight: bold;
  color: #2c3e50;
}

.odds-up {
  color: #f44336;
  animation: flash-up 2s;
}

.odds-down {
  color: #4CAF50;
  animation: flash-down 2s;
}

@keyframes flash-up {
  0% { background-color: rgba(244, 67, 54, 0.2); }
  100% { background-color: transparent; }
}

@keyframes flash-down {
  0% { background-color: rgba(76, 175, 80, 0.2); }
  100% { background-color: transparent; }
}

.odds-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tab {
  flex: 1;
  padding: 6px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9em;
  color: #666;
}

.tab:hover {
  background-color: #e0e0e0;
}

.tab.active {
  background-color: #42b983;
  color: white;
}
</style> 